<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>明月五子棋</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- all css here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/slicknav.min.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/typography.css">
    <link rel="stylesheet" href="assets/css/default-css.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- modernizr css -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
    <!--[if lt IE 8]>
		<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
    <!-- preloader area start -->
    <!---<div id="preloader">
	<div class="loader"></div>
</div>--->
    <!-- prealoader area end -->
    <!-- header area start -->
    <header>
        <div class="header-area tpheader-two">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <img src="assets/images/icon/logo.jpg" alt="logo">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-9 d-none d-lg-block">
                        <div class="main-menu">
                            <nav id="nav_mobile_menu">
                                <ul id="navigation">
                                    <li class="active">
                                        <a href="#home">Home</a>
                                    </li>
                                    <li>
                                        <a href="#about">About</a>
                                    </li>
                                    <li>
                                        <a href="#watch game">watch game</a>
                                    </li>
                                    <li>
                                        <a href="https://gitee.com/yu-caiyao/wuziqi" target="_blank">Our Gitee</a>
                                    </li>
                                    <li>
                                        <a href="#price">Download num</a>
                                    </li>
                                    <li>
                                        <a href="assets/game/wuziqi.zip" ">Download Game</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class=" col-12 d-block d-lg-none">
                                            <div id="mobile_menu"></div>
                        </div>
                    </div>
                </div>
            </div>
    </header>
    <!-- header area end -->
    <!-- hero area start -->
    <section class="game-hero-area full-height d-flex align-items-center" id="home">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1 text-center pos-rel">
                    <div class="hero-content">
                        <h2>五子棋</h2>
                        <span>The Games World</span>
                    </div>
                </div>
            </div>
        </div>
        <a href="#about" class="scrl_me_down">
            <img src="assets/images/icon/angle-down-icon.png" alt="icon">
        </a>
    </section>
    <!-- hero area end -->
    <!-- about area start -->
    <section class="abt3-area ptb--100" id="about">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="abt3-content">
                        <span>About us</span>
                        <h2>From CQU 明月科创实验班</h2>
                        <p>A non-completely self-produced page, HAVE FUN !!!</p><br />
                        <p>Design by 樊玮劼 余才垚 梁鸣洋</p>
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-1 d-none d-lg-block">
                    <div class="abt3-right-thumb">
                        <img src="assets/images/about/abt3-right-thumb.png" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- about area end -->
    <!-- about area start -->
    <section class="trailer-video ptb--100" id="watch game">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="gm-title">
                        <span>Watch Game</span>
                        <h2>Now we have come full circle</h2>
                        <p></p>
                    </div>
                    <input type="text" id="edit_url" value="ws://192.168.8.117:80" />
                    <input type="button" id="btn_open" value="Open" onclick="doOpen()" />
                    <br />
                    <h2 align="center">
                        <font color="brown">客户端下棋操作:</font>
                    </h2>
                    <textarea id="edit_recv" cols="70" rows="10"></textarea>
                    <img src="assets/images/monitor/chessBoard.jpg" />
                    <br />
                    <!-- <textarea id="edit_send" cols="50" rows="10">Hello</textarea> -->
                    <!-- <br /> -->
                    <!-- <input type="button" value="Send" onclick="doSend()" /> -->
                    <script>
                        var edit_url = document.getElementById("edit_url");
                        var btn_open = document.getElementById("btn_open");
                        var edit_recv = document.getElementById("edit_recv");
                        //var edit_send = document.getElementById("edit_send");

                        var client = null;

                        function doOpen() {
                            console.log("open")
                            if (!("WebSocket" in window)) {
                                //不支持WebSocket
                                return;
                            }
                            if (client === null) {
                                client = new WebSocket(edit_url.value);

                                client.onopen = function () {
                                    btn_open.value = "Close";
                                    edit_recv.value = '';
                                }
                                //收到数据后追加到尾巴上
                                client.onmessage = function print(event) {
                                    let n = Number(event.data);
                                    //let sn = String(event.data);
                                    if (n === 1 || n === 0 || n === 4 || n === 3) {
                                        if (n === 1) {
                                            edit_recv.value = edit_recv.value + "black win\n";
                                            //edit_recv.value = '';
                                        }
                                        else if (n === 0) {
                                            edit_recv.value = edit_recv.value + "white win\n";
                                        }
                                        else if (n === 3) {
                                            edit_recv.value = edit_recv.value + "player win\n";
                                        }
                                        else if (n === 4) {
                                            edit_recv.value = edit_recv.value + "AI win\n";
                                        }
                                    }

                                    else {
                                        let x = n / 1000;
                                        let y = (n % 1000) / 10;
                                        let t = n % 10;
                                        if (t === 1) {
                                            edit_recv.value = edit_recv.value + "玩家操纵白棋落子(" + Math.floor(x) + "," + Math.floor(y) + ")\n";
                                        }
                                        else if (t == 0) {
                                            edit_recv.value = edit_recv.value + "玩家操纵黑棋落子(" + Math.floor(x) + "," + Math.floor(y) + ")\n";
                                        }
                                        else if (t == 2) {
                                            edit_recv.value = edit_recv.value + "AI操纵落子(" + Math.floor(x) + "," + Math.floor(y) + ")\n";
                                        }
                                    }


                                }
                                client.onclose = function () {
                                    client = null;
                                    btn_open.value = "Open";
                                }
                            } else {
                                client.close();
                                client = null;
                            }
                        }



                        /* function doSend() {
                            console.log("send")
                            if (client === null)
                                return;
                            client.send(edit_send.value);
                        } */
                    </script>
                </div>
            </div>
        </div>
    </section>
    <!-- about area end -->
    <!-- facts area start -->
    <!-- feature blog area start -->
    <!--<section class="feature-blog bg-grayblack ptb--100" id="blog">
	<div class="container">
		<div class="gm-title">
			<span>Read</span>
			<h2>Our Letest News</h2>
		</div>
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/game-blog/game-blog-img1.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/game-blog/game-blog-img2.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/game-blog/game-blog-img3.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>-->
    <!-- feature blog area end -->
    <!-- pricing area start -->
    <section class="pricing-area bg-black ptb--100" id="price">
        <div class="container">
            <div class="gm-title">
                <span>Our</span>
                <h2>Download Number</h2>
            </div>
            <div class="row">
                <h1 align="center"><img src="https://www.mfwzjsq.com/hit.php?id=zpkxa&nd=6&style=4" border="0"
                        alt="網頁計數器"></h1>
            </div>
        </div>
    </section>
    <!-- pricing area end -->
    <!-- contact area start -->
    <section class="contact-area bg-grayblack ptb--100" id="contact">
        <div class="container">
            <div class="gm-title">
                <span>Locate Us</span>
                <h2>Contact Us</h2>
            </div>
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="contact-form-area">
                        <form action="#">
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" placeholder="Name...">
                                    <input type="email" placeholder="Email...">
                                    <input type="text" placeholder="Subject...">
                                </div>
                                <div class="col-md-6">
                                    <textarea name="msg" id="msg" placeholder="Message"></textarea>
                                    <input type="submit" id="submit" value="Send Message">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact area end -->
    <!-- goolge map area start -->
    <!-- <div class="google-map-fullwidth" id="google_map"></div> -->
    <!-- goolge map area end -->
    <!-- footer area start -->
    <div class="footer-area ptb--50">
        <div class="container">
            <div class="footer-content">

            </div>
        </div>
    </div>
    <!-- contact area end -->
    <!-- goolge map area start -->
    <!-- <div class="google-map-fullwidth" id="google_map"></div> -->
    <!-- goolge map area end -->
    <!-- footer area start -->
    <div class="footer-area ptb--50">
        <div class="container">
            <div class="footer-content">
            </div>
        </div>
    </div>
    <!-- footer area end -->

    <!-- jquery latest version -->
    <script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
    <!-- bootstrap 4 js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- others plugins -->
    <script src="assets/js/jquery.slicknav.min.js"></script>
    <script src="assets/js/counterup.min.js"></script>
    <script src="assets/js/waypoints.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/countdown.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/jquery.zoomslider.min.js"></script>
    <script src="assets/js/jquery.firefly.js"></script>
    <!-- google map -->
    <!---<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO_5h890WNShs_YLGivCBfs2U89qXR-7Y&callback=initMap"></script>--->
    <script src="assets/js/scripts.js"></script>
    <!--<script>
        function count(){
            <img src="https://www.mfwzjsq.com/hit.php?id=zpkxa&nd=6&style=4" border="0" alt="網頁計數器">
        }
    </script>-->

</body>

</html>